import React,{useState,useEffect} from 'react'
import { Breadcrumb } from 'antd';
import { withRouter } from 'umi';

function MyBreadcrumb(props) {
    const [breadcrumbArray, setBreadcrumbArray] = useState()
    const routerConfig = {
        '/system': "主页 / 系统管理",
        '/system/user': "用户管理",
        "/system/role": "角色管理",
        "/system/menu": "菜单管理",
        "/gen": "主页 / 商品管理",
        "/gen/goodstype": "商品类型管理",
        "/gen/goods": "商品管理",

    }
    useEffect(() => {
        console.log(props);
        props.history.listen(() => {
            changeUser()
        })
        return () => {

        }

    }, [])
    const changeUser = () => {
        const res = props.history.location.pathname.split("/").filter(item => item)
        // console.log(res);
        const readCrumbArray = res.map((_, index) => {
            let url = `/${res.slice(0, index + 1).join("/")}`
            console.log(routerConfig[url]);
            return (
                <Breadcrumb.Item key={url}>{routerConfig[url]}</Breadcrumb.Item>
            )
        })
        console.log(readCrumbArray);
        setBreadcrumbArray(readCrumbArray)
    }
    return (
        <div>
            <Breadcrumb>
                {breadcrumbArray}

            </Breadcrumb>
        </div>
    )
}

export default withRouter(MyBreadcrumb)